<template>
<!-- 所有塔吊统计页面 -->
  <div class="relative main">
    <div class="environment-header">
      <zz-back class="left" name="升降机监控" title="监控记录统计分析" style="padding: 0"></zz-back>
       <div class="head-right right">
        <button class="button-line mr10" @click="setDate(1)" :class="{'active': type === 1}">每日记录</button>
        <button class="button-line mr10" @click="setDate(2)" :class="{'active': type === 2}">每周统计</button>
        <button class="button-line mr20" @click="setDate(4)" :class="{'active': type === 4}">每月统计</button>
        <div class="date">
          <span>日期</span>
          <zz-date type="year" @change=handleChangeY v-if="type === 4"></zz-date>
          <zz-date type="day" @change=handleChangeD v-if="type === 1"></zz-date>
          <zz-select v-if="type === 2"
            class="inline mr10"
            style="width: 115px"
            :border= true
            :options="{width: '100%'}"
            :option="dateList"
            :all = false
            optionColor = "#939997"
            :name = "dateName"
            @optionClick="changeDate">
          </zz-select>  
        </div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          累计报警： <span>{{alarmList.alarmcount}}</span> 次
        </div>
        <div style="width: 100%; height: 185px;padding-top:20px;" ref="totalWarn"></div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          报警： <span>{{alarmList.dailyAvgAlarm}}</span> 次/台
        </div>
        <div style="width: 86%; height: 260px; margin: 0 auto;" ref="eachTowerWarnTimes"></div>
      </div>
    </div>
    <div class="record-box">
      <div class="pieChart">
        <div class="tit">
          平均单台单次载人 <span>{{alarmList.dailyAvgManned}}</span> 人
        </div>
        <div style="width: 86%; height: 260px; margin: 0 auto;" ref="eachTowerWorkTime"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { elevatorAnalyze } from '../../../service/api.js'
import pie from './pie.js'
import bar from './bar.js'

export default {
  name: 'allElevatorRecord',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        type: 1, // 1 day 2 week 34 month
        totalWarn: null,
        totalWarnOption: null,
        totalWarnOptions: {
          data: [],
          color: ['#33cadb', '#60bbf2', '#48dba4', '#afe551', '#a3c3fe', '#cbf1f4', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
        },
        dateList: {
          1: '本周',
          2: '上周'
        },
        dateName: '本周',
        eachTowerWarnTimes: null,
        eachTowerWarnTimesOption: null,
        eachTowerWorkTime: null,
        eachTowerWorkTimeOption: null,
        eachTowerWarnTimesOptions: {
          time: [],
          data: [],
          color: '#60bbf2'
        },
        eachTowerWorkTimeOptions: {
          time: [],
          data: [],
          color: '#33cadb'
        },
        alarmList: {
          alarmcount: 0,
          dailyAvgAlarm: 0,
          dailyAvgManned: 0
        },
        projectId: ''
      }
    },
    mounted () {
      this.type = this.$route.query.t === 'day' ? 1 : (this.$route.query.t === 'week' ? 2 : 4)
      this.projectId = this.$route.query.pjId || ''
      this.setDate()
      this.getWarnList()
    },
    methods: {
      setDate (num) {
        if (num) {
          this.type = num
        }
        let mydate = new Date()
        if (this.type === 1) {
          // 日
          console.log('day')
          let nowDay = mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate()
          this.handleChangeD(nowDay)
        }else if (this.type === 2) {
          // 周
          console.log('week')
          this.changeDate({key: '1'})
        } else {
          // 月
          console.log('month')
          let nowMonth = mydate.getFullYear() + '-' + (mydate.getMonth() + 1)
          this.handleChangeY(nowMonth)
        }
      },
      // 报警记录统计
      getWarnList () {
        elevatorAnalyze({
          deviceId: '', //设备id
          projectId: this.projectId,  // 项目id
          type: this.type,  // 1/2/3/4 日/轴/年/月
          startTime: this.startTime,
          endTime: this.endTime
        }).then( res => {
          console.log(res)
          this.alarmList.alarmcount = res.data.analyzeData.alarmcount
          this.alarmList.dailyAvgAlarm = res.data.analyzeData.dailyAvgAlarm
          this.alarmList.dailyAvgManned = res.data.analyzeData.dailyAvgManned
          // 报警记录统计饼状图
          this.totalWarnOptions.data = [
            {name: '超重', value: res.data.analyzeData.overweightcount || 0,label: {show:true}, labelLine: {show: true} },
            {name: '限位', value: res.data.analyzeData.limitlocationcount || 0,label: {show:true}, labelLine: {show: true} },
            {name: '人数', value: res.data.analyzeData.peoplecount || 0,label: {show:true}, labelLine: {show: true} },
            {name: '倾斜', value: res.data.analyzeData.anglecount || 0,label: {show:true}, labelLine: {show: true} }
          ]
          for (let i = 0; i < this.totalWarnOptions.data.length; i++) {
            if (this.totalWarnOptions.data[i].value == 0) {
              this.totalWarnOptions.data[i].labelLine.show = false
              this.totalWarnOptions.data[i].label.show = false
            }
          }
          this.totalWarnOptions.allAlarm =  res.data.analyzeData.alarmcount || 0
          // echarts图表
          // 累计报警
          this.totalWarnOption = pie(this.totalWarnOptions)
          this.totalWarn = this.$Echarts.init(this.$refs.totalWarn)
          this.totalWarn.setOption(this.totalWarnOption)
          // 每台报警
          this.eachTowerWarnTimesOptions.data = []
          this.eachTowerWorkTimeOptions.data = []
          this.eachTowerWarnTimesOptions.time = []
          this.eachTowerWorkTimeOptions.time = []
          for (let i = 0; i < res.data.dailyAvgAlarm.length; i++) {
            this.eachTowerWarnTimesOptions.data.push(res.data.dailyAvgAlarm[i].dailyAvgAlarm)
            this.eachTowerWarnTimesOptions.time.push(res.data.dailyAvgAlarm[i].deviceName)
          }
          for (let i = 0; i < res.data.dailyAvgManned.length; i++) {
            this.eachTowerWorkTimeOptions.data.push(res.data.dailyAvgManned[i].dailyAvgManned)
            this.eachTowerWorkTimeOptions.time.push(res.data.dailyAvgManned[i].deviceName)
          }    
          this.eachTowerWarnTimesOption = bar(this.eachTowerWarnTimesOptions)
          this.eachTowerWarnTimes = this.$Echarts.init(this.$refs.eachTowerWarnTimes)
          this.eachTowerWarnTimes.setOption(this.eachTowerWarnTimesOption)
          // 平均每台单次载人
          this.eachTowerWorkTimeOption = bar(this.eachTowerWorkTimeOptions)
          this.eachTowerWorkTime = this.$Echarts.init(this.$refs.eachTowerWorkTime)
          this.eachTowerWorkTime.setOption(this.eachTowerWorkTimeOption)
        }).catch( err => {
          console.log(err)
        })
      },
      handleChangeY (state) {
        this.date = state
        if (!this.date) {
          this.date = this.$moment().format('YYYY-MM')
        }
        this.startTime = this.date + '-1'
        let endString = this.$moment(this.startTime).add('month',1).add('days',-1)
        this.endTime = this.$moment(endString).format("YYYY-MM-DD")
        this.getWarnList()
      },
      handleChangeD (state) {
        if (!state) {
          state = this.$moment().format('YYYY-MM-DD')
        }
        this.startTime = state
        this.endTime = state
        this.getWarnList()
      },
      changeDate (item) {
        //console.log(item)
        let now = new Date()
        let n = now.getDay()
        if (n === 0) { n = 7}
        let startdate = now.getTime()-(n-1)*24*60*60*1000
        let enddate = now.getTime()+(7-n)*24*60*60*1000
        let laststartdate = startdate - 7*24*60*60*1000
        let lastenddate = enddate - 7*24*60*60*1000
        if(this.type === 2) {
          // 周
          switch(item.key) {
            case '1':
            // 本周
            this.startTime = this.$moment(startdate).format('YYYY-MM-DD')
            this.endTime = this.$moment(enddate).format('YYYY-MM-DD')
            break;
            case '2':
            // 上周
            this.startTime = this.$moment(laststartdate).format('YYYY-MM-DD')
            this.endTime = this.$moment(lastenddate).format('YYYY-MM-DD')
            break;
          }
        }
        this.getWarnList()
      },
      gopage (url, type) {
        this.$router.push({ path: url, query: { t: type }})
      }
    }
}
</script>

<style lang="scss" scoped>
  .main {
    background: #f8f9fb;
    padding-bottom: 44px;
    .environment-header{
      height: 60px;
      margin-bottom: 20px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
  }
  .head-right {
    position: absolute;
    right: 20px;
    z-index: 6;
    .date {
      display: inline-block;
      span {
        line-height: 30px;
      }
    }
    .active {
      color: #fff;
      background: $color;
    }
  }
  .record-box {
    width: 870px;
    margin: 0 auto 10px;
    background: #fff;
    .pieChart {
      padding: 20px 30px;
      .tit {
        font-size: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #ddd;
        span {
          font-weight: bold;
        }
      }
      .pie-box {
        padding: 20px 0 30px 0;
        text-align: center;
      }
    }
  }
</style>

